<template>
  <div class="Snapped">
    <div class="Snapped-back">
      <img
        @click="snaCallback"
        src="../inchildren/image/jifen_icon_fanhui.png"
        alt=""
      />
    </div>
    <div class="Snapped-pic">
      <img src="../inchildren/image/qianggou_icon_photo.png" alt="" />
    </div>
    <!-- 新品速递 -->
    <div class="Snapped-new">
      <div class="Snapped-news">
        <div class="Snapped-price">
          <span>￥145</span>
          <p>￥228</p>
        </div>
        <div class="Snapped-title">
          <span>自营</span>
          <h3>【新品速递】珂润敏感肌修护水乳液</h3>
        </div>
        <div class="Snapped-cont">
          <p>
            使用感受：水跟矿泉水质地差不多，嗖一下就被肌肤吸
            收了，乳相对于水来说，更加的滋润卡所以使用乳液的时
            候一定要轻拍直至完全吸收，几乎没什么味道，不会黏黏
            糊糊，有时候会用它作为湿敷，皮肤咕咚咕咚喝饱水，第
            二天起来皮肤软软呼呼！！！
          </p>
        </div>
        <div class="Snapped-guarantee">
          <div class="Snapped-guarantees">
            <img src="../inchildren/image/dui_icon.png" alt="" />
            <span>正品保障</span>
          </div>

          <div class="Snapped-guarantees">
            <img src="../inchildren/image/dui_icon.png" alt="" />
            <span>肤质匹配</span>
          </div>

          <div class="Snapped-guarantees">
            <img src="../inchildren/image/dui_icon.png" alt="" />
            <span>七天无忧退换</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 优惠券 -->
    <div class="Snapped-Coupons">
      <div class="Snapped-Coupon">
        <h2>优惠</h2>
        <img src="../inchildren/image/Coupons_pic.png" alt="" />
      </div>
    </div>
    <!-- 免运费 -->
    <div class="Snapped-ship">
      <div class="Snapped-ships">
        <h2>发货</h2>
        <span>免运费</span>
      </div>
    </div>

    <!-- 加入购物车 -->
    <div class="Snapped-cart">
      <div class="Snapped-cart1">
        <div class="Snapped-cart-pic">
          <div class="Snapped-cart-pic1">
            <img src="../inchildren/image/qianggou_icon_kefu .png" alt="" />
            <span>客服</span>
          </div>
          <div class="Snapped-cart-pic2">
            <img src="../inchildren/image/qianggou_icon_gouwuche.png" alt="" />
            <span>购物车</span>
          </div>
        </div>
        <div class="Snapped-cart-btn">
          <button>加入购物车</button>
          <button>立即购买</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  methods: {
    changeCart(index) {
      this.active = index;
      console.log(1);
    },

    snaCallback() {
        console.log(1);
      this.$router.push({ name: "seckill" });
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f8f8f8;
}

/* .Snapped-back {
  width: 15px;
  height: 27px;
} */
.Snapped-back img {
  position: absolute;
  width: 15px;
  height: 27px;
  left: 50px;
  top: 120px;
  z-index: 1;
}
/* 产品图 */
.Snapped-pic {
  width: 750px;
  height: 760px;
  position: relative;
}
.Snapped-pic img {
  width: 750px;
  height: 760px;
}

/* 价格 */
.Snapped-new {
  width: 750px;
  height: 460px;
  padding: 0 34px;
}
.Snapped-news {
  width: 675px;
  height: 480px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border-radius: 10px;
  padding: 10px 13px;
}
.Snapped-cont {
  width: 630px;
  height: 256px;
  background: #f7f7f7;
  opacity: 1;
  padding: 10px 10px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 20px;
}
.Snapped-cont p {
  width: 600px;
  height: 209px;
  line-height: 45px;
  font-size: 24px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #8c8787;
}
.Snapped-price {
  width: 650px;
  height: 50px;
}
.Snapped-price span {
  width: 70px;
  height: 50px;
  font-size: 36px;
  font-family: PingFangSC-Medium-, PingFangSC-Medium;
  font-weight: 600;
  color: #e70318;
}
.Snapped-price p {
  display: inline-block;
  width: 58px;
  height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #999999;
  text-decoration: line-through;
  margin-left: 50px;
}
.Snapped-title {
  width: 650px;
  height: 50px;
  margin-top: 10px;
}
/* 商品功效 */
.Snapped-title span {
  display: inline-block;
  width: 49px;
  height: 30px;
  font-size: 20px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #161515;
  background-color: #bbd2f4;
  line-height: 30px;
  text-align: center;
  border-radius: 8px;
}
.Snapped-title h3 {
  display: inline-block;
  width: 550px;
  height: 50px;
  font-size: 34px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: 600;
  color: #161515;
  margin-left: 3px;
}
/* 优惠+发货 */
.Snapped-guarantee {
  width: 650px;
  height: 30px;
  padding: 0 30px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.Snapped-guarantees {
  width: 170px;
  height: 30px;
  /* margin-right: 15px; */
}
.Snapped-guarantees img {
  /* display: block; */

  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.Snapped-guarantees span {
  /* display: block; */
  width: 150px;
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #999999;
}
.Snapped-Coupons {
  width: 750px;
  height: 92px;
  padding: 0 34px;
  margin-top: 40px;
  /* background: red; */
}
.Snapped-Coupon {
  width: 675px;
  height: 92px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border-radius: 10px;
  padding: 10px 13px;
}
.Snapped-Coupon h2 {
  width: 60px;
  height: 42px;
  display: inline-block;
  margin-top: 15px;
  margin-left: 5px;
  float: left;
  font-size: 30px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #999999;
}
.Snapped-Coupon img {
  float: left;
  margin-top: 10px;
  margin-left: 30px;
  width: 173px;
  height: 48px;
}
.Snapped-ship {
  width: 750px;
  height: 92px;
  padding: 0 34px;
  margin-top: 15px;
  /* background: red; */
}

.Snapped-ships {
  width: 675px;
  height: 92px;
  background: #ffffff;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border-radius: 10px;
  padding: 10px 13px;
}
.Snapped-ships h2 {
  width: 60px;
  height: 42px;
  font-size: 30px;
  line-height: 70px;
  margin-left: 5px;
  display: inline-block;
  float: left;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #999999;
}
.Snapped-ships span {
  width: 90px;
  line-height: 70px;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #161515;
  margin-left: 30px;
}
/* 加入购物车 */

.Snapped-cart {
  margin-top: 15px;

  width: 750px;
  height: 70px;
  padding: 0 32px;
}

.Snapped-cart1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 675px;
  height: 92px;
  /* background: #ffffff; */
}
.Snapped-cart-pic {
  display: flex;
  justify-content: space-between;
  width: 160px;
  height: 70px;
  margin-left: 50px;
  /* background: red; */
}
.Snapped-cart-pic1 {
  text-align: center;
  width: 60px;
  height: 70px;
  /* background: blue; */
}
.Snapped-cart-pic1 img {
  width: 45px;
  height: 40px;
}
.Snapped-cart-pic2 img {
  width: 45px;
  height: 40px;
}
.Snapped-cart-pic1 span {
  width: 60px;
  height: 28px;
  /* text-align: center; */

  font-size: 20px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #393737;
}
.Snapped-cart-pic2 span {
  text-align: center;
  width: 60px;
  height: 28px;
  font-size: 20px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #393737;
}
.Snapped-cart-pic2 {
  width: 60px;
  height: 70px;
  /* background: blue; */
}

.Snapped-cart-btn button {
  margin-left: 20px;
  width: 190px;
  height: 70px;
  /* background: #e0e0e0; */
  border-radius: 35px 35px 35px 35px;
  opacity: 1;
  outline: none;
  border: 0;
  font-size: 24px;
  font-family: PingFangSC-Regular-, PingFangSC-Regular;
  font-weight: normal;
  color: #272727;
}
.Snapped-cart-btn button:hover {
  background: #bbd2f4;
}
</style>
